<template>
  <div class="student-grades">
    <h1 class="text-3xl font-bold text-gray-800 mb-6">我的成绩</h1>
    
    <!-- 成绩概览 -->
    <div class="bg-white p-6 rounded-lg shadow-md mb-6">
      <h2 class="text-xl font-semibold text-gray-700 mb-4">成绩概览</h2>
      <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div class="text-center">
          <div class="text-2xl font-bold text-blue-600">85.5</div>
          <div class="text-gray-600">平均分</div>
        </div>
        <div class="text-center">
          <div class="text-2xl font-bold text-green-600">12</div>
          <div class="text-gray-600">班级排名</div>
        </div>
        <div class="text-center">
          <div class="text-2xl font-bold text-purple-600">5</div>
          <div class="text-gray-600">总课程数</div>
        </div>
        <div class="text-center">
          <div class="text-2xl font-bold text-orange-600">3.2</div>
          <div class="text-gray-600">GPA</div>
        </div>
      </div>
    </div>

    <!-- 成绩详情表格 -->
    <div class="bg-white rounded-lg shadow-md overflow-hidden">
      <div class="px-6 py-4 border-b border-gray-200">
        <h2 class="text-xl font-semibold text-gray-700">成绩详情</h2>
      </div>
      <div class="overflow-x-auto">
        <table class="w-full">
          <thead class="bg-gray-50">
            <tr>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">课程名称</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">课程类型</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">学分</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">成绩</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">等级</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">排名</th>
            </tr>
          </thead>
          <tbody class="bg-white divide-y divide-gray-200">
            <tr class="hover:bg-gray-50">
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="text-sm font-medium text-gray-900">高等数学</div>
                <div class="text-sm text-gray-500">张教授</div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-xs">必修</span>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">4</td>
              <td class="px-6 py-4 whitespace-nowrap">
                <span class="text-green-600 font-semibold">88</span>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <span class="bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs">B+</span>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">15/45</td>
            </tr>
            <tr class="hover:bg-gray-50">
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="text-sm font-medium text-gray-900">大学英语</div>
                <div class="text-sm text-gray-500">李老师</div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <span class="bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs">选修</span>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">3</td>
              <td class="px-6 py-4 whitespace-nowrap">
                <span class="text-green-600 font-semibold">92</span>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-xs">A-</span>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">8/45</td>
            </tr>
            <tr class="hover:bg-gray-50">
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="text-sm font-medium text-gray-900">计算机基础</div>
                <div class="text-sm text-gray-500">王老师</div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-xs">必修</span>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">3</td>
              <td class="px-6 py-4 whitespace-nowrap">
                <span class="text-green-600 font-semibold">85</span>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <span class="bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs">B+</span>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">18/45</td>
            </tr>
            <tr class="hover:bg-gray-50">
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="text-sm font-medium text-gray-900">体育</div>
                <div class="text-sm text-gray-500">陈教练</div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-xs">必修</span>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">1</td>
              <td class="px-6 py-4 whitespace-nowrap">
                <span class="text-green-600 font-semibold">90</span>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-xs">A-</span>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">10/45</td>
            </tr>
            <tr class="hover:bg-gray-50">
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="text-sm font-medium text-gray-900">思想道德修养</div>
                <div class="text-sm text-gray-500">刘教授</div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-xs">必修</span>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">2</td>
              <td class="px-6 py-4 whitespace-nowrap">
                <span class="text-green-600 font-semibold">87</span>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <span class="bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs">B+</span>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">14/45</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script setup>
// 学生成绩页面逻辑
</script>

<style scoped>
.student-grades {
  padding: 2rem;
  background-color: #f8fafc;
  min-height: 100vh;
}
</style> 